<template>
  <div class="header-search">
    <i class="iconfont iconsearch" @click.stop="click"></i>
    <input
      ref="searchInput"
      :class="{ show: show }"
      v-model="searchValue"
      type="text"
      @click.stop=""
      @keyup.enter="search"
    />
  </div>
</template>

<script>
export default {
  name: "header-search",
  data() {
    return {
      searchValue: "",
      show: false,
    };
  },
  watch: {
    show(value) {
      if (value) {
        document.body.addEventListener("click", this.close);
      } else {
        document.body.removeEventListener("click", this.close);
      }
    },
  },
  methods: {
    search() {
      // console.log(this.searchValue)
      this.$router.push({
        name: "search",
        params: { words: this.searchValue },
      });
      this.close();
    },
    click() {
      this.searchValue = "";
      this.show = !this.show;
      if (this.show) {
        this.$refs.searchInput && this.$refs.searchInput.focus();
      }
    },
    close() {
      this.$refs.searchInput && this.$refs.searchInput.blur();
      this.show = false;
    },
  },
};
</script>

<style scoped lang="less">
.header-search {
  display: inline-block;
  position: relative;
  i {
    font-size: 18px;
    position: relative;
    top: 3px;
  }
  input {
    border: none;
    outline: none;
    overflow: hidden;
    background: transparent;
    height: 30px;
    width: 0;
    transition: 0.2s all;
    &.show {
      width: 200px;
      margin-left: 10px;
    }
    &:focus {
      border-bottom: 1px solid #8fd0cc;
    }
  }
}
</style>
